<!-- 课后考试统一页面 -->

<template>
	<focus-body mode="fix">
		
		<!-- ================================================= 实占层 -->
		<!-- 轮播图块 -->
		<focus-box width="750" :height="sys.height_rpx" mode="col" justify="start" align="stretch">
			
			<!-- 轮播图组件 -->
			<swiper :style="'width:750rpx; height:'+sys.height_rpx+'rpx;'"
			:indicator-dots="false" :autoplay="false"
			:current="swiper.index" @change="swiperCall">
				<!-- 轮播滑块 -->
				<swiper-item v-for="(item,index) in swiper.list" :key="item.key">
					<!-- 滚动框 -->
					<scroll-view :style="'width:750rpx; height:'+sys.height_px+'px;'"
					:scroll-y="true">
						
						<!-- 试题信息 组件 -->
						<question-item
							:type="item.type"
							:caption="item.order+'、'+item.title"
							:ownanswer="item.myAnswer"
							:anslist="item.ansList"
							@answerclick="quesAnswer"
						></question-item>
						
						<!-- 底部悬浮按钮栏占位容器 -->
						<focus-box width="100" height="150"></focus-box>
						
					</scroll-view>
				</swiper-item>
			</swiper>
			
		</focus-box>
		
		
		<!-- ================================================= 悬浮层 -->
		<!-- 底部按钮块 -->
		<focus-box width="750" height="130" mode="row" justify="center" align="center"
		position="fixed" left="0" bottom="0" index="3x"
		bg="white" shadow="true">
			
			<!-- 交卷按钮 -->
			<focus-box v-if="(swiper.index+1) >= pageInfo.total"
			width="686" height="80" mode="row" justify="center" align="center"
			bg="primary" bgscheme="hover" radius="40" @click="submitBtnClick">
				<focus-text size="32" color="white" text="交卷"></focus-text>
			</focus-box>
			
			<!-- 下一题按钮 -->
			<focus-box v-else
			width="686" height="80" mode="row" justify="center" align="center"
			bg="primary" bgscheme="hover" radius="40" @click="nextBtnClick">
				<focus-text size="32" color="white" text="下一题"></focus-text>
			</focus-box>
			
		</focus-box>
		
		
		<!-- ================================================= 弹出层 -->
		<!-- 通用信息模态框 -->
		<modal-info 
			ref="myModalInfoDjy"
			:tag="modalMy.list[modalMy.index].tag"
			:mode="modalMy.list[modalMy.index].mode"
			:content="modalMy.list[modalMy.index].content"
			:cancelText="modalMy.list[modalMy.index].cancelText"
			:confirmText="modalMy.list[modalMy.index].confirmText"
			@cancel="onModalCancel"
		></modal-info>
		
		
	</focus-body>
</template>


<script>
	// 接口请求文件引入
	import request from '../../../common/js/request/exam.js';
	
	// 组件引入
	import questionItem from './element/question-item/question-item.vue'; // 中间试题展示
	
	/**
	 * 课后考试统一页面
	 * @description 课后考试统一页面，以下为url传参
	 * @property {String,Number} courseId 课程id
	 * @property {String,Number} jieId 小节id
	 */
	export default {
		
		// 组件
		components: {
			questionItem,
		},
		
		// 页面数据
		data() {
			return {
				// 系统信息
				sys: {},
				
				// 传递数据
				send: {
					courseId: 0, // 课程id
					jieId: 0, // 小节id
				},
				
				// 页面标题信息
				pageInfo: {
					juanId: 0, // 卷子id
					title: '课后练习', // 页面标题前缀
					total: 0, // 试题总数
				},
				
				// 直渲染全长度轮播图
				swiper: {
					index: 0, // 当前滑动块下标
					list: [], // 试题列表
				},
				
				// 模态提示框
				modalMy: {
					index: 0,
					list: [
						// 未做完提示框
						{
							tag: 'notSend',
							mode: "warning",
							content: "",
							cancelText: "直接交卷",
							confirmText: "返回作答",
						},
						// 已经做完提示框
						{
							tag: 'ok',
							mode: "primary",
							content: "",
							cancelText: "直接交卷",
							confirmText: "返回作答",
						}
					]
				},
				
			}
		},
		
		// 加载完毕
		onLoad(options) {
			// 获取传递数据，对应send赋值
			this.send = Object.assign(this.send, options);
			// 进行试卷信息请求
			this.testBuildReq();
		},
		
		// 页面初次渲染完成
		onReady() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// ======================================== 数据处理
			// 设置页面标题
			pageTitleSet() {
				// 标题文字组装
				var str_title = this.pageInfo.title + '（' + (this.swiper.index+1) + '/' + this.pageInfo.total + '）';
				// 设置标题方法
				uni.setNavigationBarTitle({ title: str_title });
			},
			
			// 搜寻并且返回还未做的题的数量
			selectNotSendQuestion() {
				// 初始化返回数据
				var num_notsend = 0;
				// 循环所有的试题
				for (let i = 0; i < this.swiper.list.length; i++)
				{
					// 节点 - 一个试题对象
					var ele_ques = this.swiper.list[i];
					// 如果试题没有做
					if (ele_ques.myAnswer.length <= 0) { num_notsend += 1; }
				}
				// 返回数据
				return num_notsend;
			},
			
			
			// ======================================== 元素事件
			// 轮播图组件 回调
			swiperCall(objD) {
				// 当前下标值
				var index = objD.detail.current;
				// 当前选中下标 赋值
				this.swiper.index = index;
				// 设置页面标题
				this.pageTitleSet();
			},
			
			// 试题作答操作 回调
			quesAnswer(objD) {
				// 提交数据：选择的答案
				this.testAnswerSendReq(objD.answerCheck);
				/* // 将tabbar组件的题号状态 变更
				this.$refs.myTabbarBottom.stateIsAnswer(objD.isFinish);
				// 如果是考试模式，并且为单选判断题，自动跳往下一题
				if ( this.send.kaoType>=1 && (objD.topName==1 || objD.topName==2) )
				{
					// 是否轮播图还有下一页
					let index_next = this.swiper.index + 1;
					if (index_next <= (this.swiper.list.length - 1))
					{
						// 清除定时器对象
						if (this.timer.autoNext) { clearTimeout(this.timer.autoNext); }
						// 延时200ms自动跳往下一题
						this.timer.autoNext = setTimeout(()=>{
							// 轮播图下标 赋值
							this.swiper.index = index_next;
						}, 200);
					}
				} */
			},
			
			// 底部“下一题”按钮 点击
			nextBtnClick() {
				// 目标滑块下标
				var index_go = this.swiper.index + 1;
				// 如果有下一题
				if (index_go < this.pageInfo.total)
				{
					// 轮播图滑块下标 赋值
					this.swiper.index = index_go;
				}
			},
			
			// 底部“提交”按钮 点击
			submitBtnClick() {
				
				// 计算未作答题数
				var num_not = this.selectNotSendQuestion();
				
				// 如果有未作答的题
				if (num_not > 0){
					// 编写提示文本
					this.modalMy.list[0].content = '您尚有 '+num_not+' 道题未答，会影响您的结果和成绩，是否直接交卷？';
					// 弹第一种框
					this.modalMy.index = 0;
					// 交卷弹框提示
					this.$refs.myModalInfoDjy.open();
				}
				// 做完题了
				else {
					// 清除当前页面栈跳转 结果页面
					uni.$focus.pageJump('/pagesB/pages/question/result/index', {
						courseId: this.send.courseId, // 课程id
						jieId: this.send.jieId, // 小节id
						juanId: this.pageInfo.juanId, // 卷子id
						term_id: this.send.term_id,//周期Id
						cert_id: this.send.cert_id,//证书Id
						item_type:this.send.item_type
					}, 'replace');
				}
				
			},
			
			// 信息模态框取消按钮 回调
			onModalCancel() {
				// 如果是“未做完提示框”
				if (this.modalMy.index == 0)
				{
					// 清除当前页面栈跳转 结果页面
					uni.$focus.pageJump('/pagesB/pages/question/result/index', {
						courseId: this.send.courseId, // 课程id
						jieId: this.send.jieId, // 小节id
						juanId: this.pageInfo.juanId, // 卷子id
						term_id: this.send.term_id,//周期Id
						cert_id: this.send.cert_id,//证书Id
						item_type: this.send.item_type
					}, 'replace');
				}
			},
			
			
			// ======================================== 接口请求
			// 创建试卷
			testBuildReq() {
				request.testBuild({
					data: {
						teach_course_info_id: this.send.courseId, // 课程id
						chapter_id: this.send.jieId, // 小节id
						term_id: this.send.term_id,//周期Id
						cert_id: this.send.cert_id//证书Id
					},
					success: (res) => {
						// 卷子id 赋值
						this.pageInfo.juanId = res.juanId;
						// 试题列表数据 请求
						this.testContentGetReq();
					},
				});
			},
			
			// 获取试题列表数据
			testContentGetReq() {
				request.testContentGet({
					data: {
						paper_id: this.pageInfo.juanId, // 卷子id
					},
					success: (res) => {
						// 轮播图列表数据 赋值
						this.swiper.list = res.list;
						// 试题总数量 赋值
						this.pageInfo.total = res.list.length;
						// 设置页面标题
						this.pageTitleSet();
					},
				});
			},
			
			// 用户点击试题某个答案后 提交数据，参数：arr_ans-选择答案的数组
			testAnswerSendReq(arr_ans) {
				// 找到当前试题对象
				var obj_question = this.swiper.list[this.swiper.index];
				// 发起请求
				request.testAnswerSend({
					data: {
						"paper_id": this.pageInfo.juanId, // 卷子id
						"fill_id": obj_question.localId, // 试题id
						"sort": arr_ans.join(','), // 考生填写答案 多选题按照,分割
					},
					success: (res) => {
						// 自己选择的答案 覆盖赋值
						obj_question.myAnswer = arr_ans;
					},
				});
			},
			
		},
		
	}
</script>
